<template>
<div>
  <el-header>
         <el-button type="primary" @click="editApp({})" size="small">增加系统</el-button>
     </el-header>
   <el-table
    :data="apps"
    stripe
    style="width: 100%">
    <el-table-column
      prop="id"
      label="ID"
      width="80">
    </el-table-column>
     <el-table-column
      prop="appName"
      label="名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="appKey"
      label="appKey"
      width="300">
    </el-table-column>
  <el-table-column
      prop="callback"
      label="回调地址"
      width="300">
    </el-table-column>
    
    <el-table-column
      fixed="right"
      label="操作"
      width="300">
      <template slot-scope="scope">
        
        <!-- <el-button type="text" @click="updateSubApp(scope.row)" size="small">更新仓库</el-button>
        <el-button type="text" @click="startSubApp(scope.row)" size="small">启动</el-button>-->
        <el-button type="text" @click="stopSubApp(scope.row)" size="small">更新APPKEY</el-button> 
        <el-button type="text" @click="editApp(scope.row)" size="small">编辑</el-button>
        <el-button type="text" @click="editApp(scope.row)" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

   <el-dialog 
   center
   width="500px"
   title="编辑系统" :visible.sync="appFormVisible">
  <el-form :model="app">
    <el-form-item label="名称" :label-width="formLabelWidth">
      <el-input v-model="app.appName" auto-complete="off"></el-input>
    </el-form-item>
     <el-form-item label="回调地址" :label-width="formLabelWidth">
      <el-input v-model="app.callback" auto-complete="off"></el-input>
    </el-form-item>
    
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="editAppInfo()">确 定</el-button>
  </div>
</el-dialog>  
</div>
</template>

<script>
import api from "../api";
export default {
  name: "Index",
  created() {
    this.getApps();
  },
  computed: {
    // comValue: function() {
    //   return this.task.value.split(",");
    // }
  },
  methods: {
    editApp(item) {
    //  debugger;
      this.app = item;
      this.appFormVisible = true; 
    },
    // startSubApp(item) {
    //   // this.sysPercentage = true;
    //   api.startSubApp({ id: item.id });
    // },
    // stopSubApp(item) {
    //   api.stopSubApp({ id: item.id });
    // },
    editAppInfo() {
      api.editAppInfo(this.app).then(() => {
        this.appFormVisible = false;
        // this.success("更新成功!");
      });
    },
    // success(message) {
    //   this.$message({
    //     message: message,
    //     type: "success"
    //   });
    // },
    // updateSubApp(item) {
    //   api.updateSubApp({ id: item.id }).then(() => {
    //     //  this.getSubApp();
    //      this.success("更新成功!");
    //   });
    // },
    getApps(index) {
      // debugger;
      api.getApps().then(res => {
        this.apps = res.data.data;
        // this.subApp = [];
        // console.log(res.data[0]);
      });
    }
  },
  data() {
    return {
      apps:[],
      sysPercentage: false,
      formLabelWidth: "100px",
      appFormVisible: false,
      app: {
        id: "0",    
        appName: "",
        callback: "",
       
      },
      subApp: []
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
.login-box {
  margin: 0 auto;
  width: 400px;
  padding: 12px;
  border: 1px solid #cccccc;
  border-radius: 5px;
}
.mt15 {
  margin-top: 15px;
}
</style>
